{% extends 'base.html' %}
{% load static %}
{% block title %}报表{% endblock %}
{% block content %}
<div class="container">
  <div class="row">
    <!-- 部门人数统计图 (饼图) -->
    <div class="col-sm-6 col-md-6 col-lg-6">
      <div class="panel panel-default" style="border: 1px solid #ffc2c4; border-radius: 8px;">
        <div class="panel-heading" style="background-color: #ff6b81; color: white; font-weight: 600; font-size: 16px; border-radius: 8px 8px 0 0;">
          部门人数统计图 (饼图)
        </div>
        <div class="panel-body" style="padding: 20px; background-color: #fffafa;">
          <div id="t1" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>
    <!-- 部门人数统计图 (柱状图) -->
    <div class="col-sm-6 col-md-6 col-lg-6">
      <div class="panel panel-default" style="border: 1px solid #ffc2c4; border-radius: 8px;">
        <div class="panel-heading" style="background-color: #ff6b81; color: white; font-weight: 600; font-size: 16px; border-radius: 8px 8px 0 0;">
          部门人数统计图 (柱状图)
        </div>
        <div class="panel-body" style="padding: 20px; background-color: #fffafa;">
          <div id="t2" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 20px;">
    <!-- 部门人数统计图 (饼图) -->
    <div class="col-sm-6 col-md-6 col-lg-6">
      <div class="panel panel-default" style="border: 1px solid #ffc2c4; border-radius: 8px;">
        <div class="panel-heading" style="background-color: #ff6b81; color: white; font-weight: 600; font-size: 16px; border-radius: 8px 8px 0 0;">
          部门人数统计图 (饼图)
        </div>
        <div class="panel-body" style="padding: 20px; background-color: #fffafa;">
          <div id="t3" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>
    <!-- 部门工资情况统计图 (柱状图) -->
    <div class="col-sm-6 col-md-6 col-lg-6">
      <div class="panel panel-default" style="border: 1px solid #ffc2c4; border-radius: 8px;">
        <div class="panel-heading" style="background-color: #ff6b81; color: white; font-weight: 600; font-size: 16px; border-radius: 8px 8px 0 0;">
          部门工资情况统计图 (柱状图)
        </div>
        <div class="panel-body" style="padding: 20px; background-color: #fffafa;">
          <div id="t4" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
<script type="text/javascript">
  $(function() {
    let chart1 = echarts.init($('#t1').get(0));
    let chart2 = echarts.init($('#t2').get(0));
    let chart3 = echarts.init($('#t3').get(0));
    let chart4 = echarts.init($('#t4').get(0));

    // 获取图表数据并设置到对应图表中
    $.get('{% url "chart1" %}', function(datas) {
      chart1.setOption(datas);
    });
    $.get('{% url "chart2" %}', function(datas) {
      chart2.setOption(datas);
    });
    $.get('{% url "chart3" %}', function(datas) {
      chart3.setOption(datas);
    });
    $.get('{% url "chart4" %}', function(datas) {
      chart4.setOption(datas);
    });

    // 监听窗口大小调整，调整图表大小
    window.addEventListener('resize', function() {
      chart1.resize();
      chart2.resize();
      chart3.resize();
      chart4.resize();
    });
  });
</script>
{% endblock %}
